<template>
  <div :class="$style.wrap">
    <ContentWrap>
      <div :class="$style.head">
        <h1 :class="$style.title">{{ detail.title }}</h1>
      </div>
      <div :class="$style.content">
        <ChapterList :editable="editable" :is-preview="isPreview" :chapter-list="detail.questionnaireChapterDTOList" :questionnaire-id="$route.params.id" @on-refresh="getDetail">
          <div class="button-container" style="paddint-top:10px;justify-content: center;">
            <Button v-if="show && btnShow" type="primary" @click="confirmHandle">确认</Button>
          </div>
        </ChapterList>
      </div>
    </ContentWrap>
  </div>
</template>
<script>
import ContentWrap from '@/components/ContentWrap'
import ChapterList from '../evaluateManage/components/chapterList'

import { questionnaireDetailByIdSetAnswer } from '@/api/questionnaire'
export default {
  name: 'Preview',
  components: {
    ContentWrap,
    ChapterList
  },
  props: {
    id: {
      type: String,
      default: undefined,
      required: true
    },
    results: {
      type: Array,
      default: () => []
    },
    isAllege: {
      type: Boolean,
      default: false
    },
    isPreview: {
      type: Boolean,
      default: true
    },
    editable: {
      type: Boolean,
      default: true
    },
    btnShow: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      detail: {},
      show: false
    }
  },
  watch: {
    id: {
      handler() {
        this.getDetail()
      },
      immediate: true
    }
  },
  methods: {
    // 根据id获取详情
    getDetail() {
      if (!this.id) return
      questionnaireDetailByIdSetAnswer(this.id).then(res => {
        this.setResults(res.data)
        this.detail = res.data
        this.show = true
      })
    },
    confirmHandle() {
      this.$emit('on-confirm', this.detail)
    },
    // 设置答案
    setResults(data) {
      for (const result of this.results) {
        for (const chapter of data.questionnaireChapterDTOList) {
          for (const question of chapter.questionnaireQuestionDTOList) {
            if (question.id !== result.questionId) continue
            if (question.enterContent === undefined) {
              question.enterContent = {}
            }
            if (question.result === undefined) {
              question.result = ''
              if (['1', 1].includes(question.questionType)) {
                question.result = []
              }
            }
            // 接收输入
            let answer, description, optionId
            if (!this.isAllege) {
              answer = result.answer
              description = result.description
              optionId = result.optionId
            } else {
              answer = result.appealAnswer
              description = result.appealDescription
              optionId = result.appealOptionId
            }
            for (let i = 0; i < question.questionOptionDTOList.length; i++) {
              const option = question.questionOptionDTOList[i]
              if (['0', 0].includes(question.questionType) && option.id === optionId) {
                question.result = i
                if (option.isEnter === 1) {
                  question.enterContent[i] = description
                }
              } else if (['1', 1].includes(question.questionType)) {
                question.result.push(i)
                if (option.isEnter === 1) {
                  question.enterContent[i] = description
                }
              } else {
                question.enterContent[i] = answer
              }
            }
          }
        }
      }
    }
  }
}
</script>
<style lang='scss' module>
.wrap{
  .head {
    position: relative;
    overflow: hidden;
    height: 40px;
    line-height: 40px;
    margin-top: -30px;
    .title{
      color: #333;
      font-size: 24px;
      margin: 0;
      text-align: center;
    }
  }
  .content{
    line-height: 28px;
  }
}
</style>
